<template>
  <div v-if="selectData.length != 0">
    <div class="card_header">
		<span style="font-size: 22px; text-align: left; margin-left: 95px;"> {{ selectData['indicator'] }}</span>
		<span style="font-size: 22px; text-align: right; width: 460px;"> {{ columnData['indicator'] }}</span>
    </div>
    <div>
		<div v-for="(v, i) in columnNames" :key="i" style="display: flex; flex-direction: row; padding-top: 20px;">
			<div class="props">{{v}}</div>
			<div class="select_country" :style="'width:'+getWidth(selectData[v], columnData[v])[0]+'px;'">{{selectData[v]}}</div>
			<div class="cur" :style="'width:'+getWidth(selectData[v], columnData[v])[1]+'px;'">{{columnData[v]}}</div>
		</div>
	</div>
  </div>
</template>

<script>
import d3 from 'd3'
// import store from '../../store/index.js'
import { selected} from '../assets/js/frame.js'
export default {
  name: 'App',
  props: ['nation'],
  components: {
  },
  updated () {
    console.log(this.nation)
  },
  data () {
    return {
		selectNum: this.$store.state.selected,
		columnData: [],
		selectData: [],
		columnNames: ['population', 'surface area (Km2)', 'GINI index', 'happy planet index',
        'human development index', 'world happiness report score', 'sustainable economic development assessment (SEDA)',
        'GDP (billions PPP)', 'GDP per capita (PPP)', 'GDP growth(annual %)', 'health expenditure % of GDP',
        'health expenditure per person', 'education expenditure% of GDP', 'education expenditure per person',
        'school life expectancy (YEARS)', 'unemployment (%)', 'government spending score',
        'government expenditure (% of GDP)', 'political rights score', 'civil liberties score',
        'political stability & absence of violence', 'government effectiveness', 'regulatory quality',
        'rule of law', 'control of corruption', 'judicial effectiveness score', 'government integrity score',
        'property rights score', 'tax burden score', 'overall economic freedom score', 'financial freedom score', 'women MPs (% of all MPs)']

    }
  },
  mounted () {
    // console.log('sl', selected)
	// console.log('cd', this.$props.nation);
	this.draw()
    this.columnData = this.$props.nation
	this.selectList = this.$store.state.selected
  },
  watch: {
    nation: function (newVal) {
      this.columnData = newVal
      console.log("columnData",this.columnData)
    },
	'$store.state.selected': function(newVal) {
		// Vue.set(this.selectList,0, this.$store.state.selected)
		this.selectNum = newVal
		this.draw()
	}
  },
  computed: {
	select: function() {
		return selected
	}
  },
  methods: {
	draw: function() {
		let that = this;
		d3.csv('formatData.csv', function (nations) {
			// let bar_height = 20;
			// let bar_padding = 8str.slice(1, -1)
			console.log('num', parseInt(that.selectNum.slice(1)));
			that.selectData = nations[parseInt(that.selectNum.slice(1))];
			console.log('select', that.selectData);
		})
	},
	getWidth: function(a, b) {
		let totalWidth = document.documentElement.clientWidth / 2 - 200 ;
		a = parseFloat(a)
		b = parseFloat(b)
		let scaleA = a / (a + b)
		let scaleB = b / (a + b)
		// console.log('width',a, b);
		return [parseInt(totalWidth * scaleA), parseInt(totalWidth * scaleB)]
	}
  }
}
</script>
<style>
.card_header {
  position: -webkit-sticky;
  position: sticky;
  display: flex;
  flex-direction: row;
  top: 0;
  padding: 5px;
  background: white;
}

.props {
	width: 50px;
	height: 100px;
}
.select_country {
	margin-left: 50px;
	margin-top: 20px;
	/* line-height: 35px; */
	background-color: #42B983;
	height: 20px;
	color: white;
	font-size: 10px;
	text-align: right;
}
.cur {
	margin-left: 1.5px;
	margin-top: 20px;
	/* line-height: 70px; */
	background-color: #D2691E;
	height: 20px;
	color: white;
	font-size: 10px;
	text-align: left;
}
</style>
